<template>
    <view class="pb-safe-area">
        <view class="p-4 flex flex-column grid-gap-4">
            <x-alert type="danger" v-if="form.message && form.examine === 3" :closed="false">{{ form.message
                }}</x-alert>
            <x-alert type="dark" v-if="form.examine === 0" :closed="false">正在审核中，请耐心等待</x-alert>
            <view class="bg-white rounded-4 p-4 flex flex-column grid-gap-4">
                <view class="flex flex-column grid-gap-2 p-2">
                    <text class="h9 text-grey text-nowrap">商户LOGO</text>
                    <x-uploads v-model="form.logo" :disbale="formDisabled" :margins="80" :col="2"></x-uploads>
                </view>
                <view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
                    <view class="h9 text-grey text-nowrap">商户名称</view>
                    <input type="text" placeholder="请输入商户名称" class="flex-1 text-right font-weight-600 h9"
                        v-model="form.title" :disabled="formDisabled">
                </view>
                <view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg"
                    @tap="!formDisabled && xRegionsRef.show()">
                    <view class="h9 text-grey text-nowrap">地区</view>
                    <view class="flex-1 flex flex-x-flex-end">
                        <text v-if="form.city_id" class="font-weight-600 h9 text-break-all text-wrap">{{ form.province
                            }} {{ form.city }} {{ form.area }} {{ form.street }}</text>
                        <text class="text-placeholder font-weight-600 h9" v-else> 请选择地区 </text>
                    </view>
                    <uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
                </view>
                <view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
                    <view class="h9 text-grey text-nowrap">详细地址</view>
                    <textarea class="flex-1 text-right font-weight-600 h9" v-model="form.address" auto-height
                        maxlength="200" placeholder-class="text-placeholder" placeholder="详细地址，例如：XX小区X栋X单元X楼8888号"
                        :disabled="formDisabled"></textarea>
                </view>
                <view class="flex rounded-4 p-2 grid-gap-2" hover-class="bg">
                    <view class="h9 text-grey text-nowrap">商户联系电话({{ form.tel.length }}/3)</view>
                    <view class="flex-1 flex flex-column grid-gap-2">
                        <view class="flex flex-center grid-gap-2" v-for="(item,index) in form.tel" :key="index">
                            <input type="tel" placeholder="商户联系电话" class="flex-1 text-right font-weight-600 h9"
                                v-model="form.tel[index]" :disabled="formDisabled">
                            <uni-icons type="minus-filled" size="20" color="var(--xl-danger)"
                            @tap="removeTel(index)" v-if="!formDisabled"></uni-icons>
                        </view>
                        <view class="flex flex-center grid-gap-2" v-if="!formDisabled&&form.tel.length<3">
                            <input type="tel" placeholder="商户联系电话" class="flex-1 text-right font-weight-600 h9"
                                v-model="tel">
                            <uni-icons type="plus-filled" size="20" color="var(--xl-success)"
                            @tap="addTel"></uni-icons>
                        </view>
                    </view>
                </view>
                <view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
                    <view class="h9 text-grey text-nowrap">负责人</view>
                    <input type="text" placeholder="请输入负责人名称" class="flex-1 text-right font-weight-600 h9"
                        v-model="form.name" :disabled="formDisabled">
                </view>
                <view class="flex flex-center rounded-4 p-2 grid-gap-2" hover-class="bg">
                    <view class="h9 text-grey text-nowrap">负责人手机号码</view>
                    <input type="tel" placeholder="请输入负责人手机号码" class="flex-1 text-right font-weight-600 h9"
                        v-model="form.mobile" maxlength="11" :disabled="formDisabled">
                </view>
                <view class="flex flex-column grid-gap-2 p-2">
                    <text class="h9 text-grey text-nowrap">商户图册({{ form.thumb.length }}/9)</text>
                    <x-uploads v-model="form.thumb" keyName="url" :limit="9" fill :margins="80" :remove="removeThumb"
                        :disbale="formDisabled"></x-uploads>
                </view>
                <view class="flex flex-column grid-gap-2 p-2"
                    v-if="WEBCONFIG && WEBCONFIG.mch_qualifications && WEBCONFIG.mch_qualifications.length > 0">
                    <text class="h9 text-grey text-nowrap">
                        资质({{ form.qualifications.length }}/{{ WEBCONFIG.mch_qualifications.length }})</text>
                    <x-uploads v-model="form.qualifications" keyName="url"
                        :limit="WEBCONFIG.mch_qualifications.length + 1" fill :margins="80" :disbale="formDisabled"
                        :remove="removeQualifications"></x-uploads>
                    <text class="h9 text-grey">需要上传资质证明：{{ WEBCONFIG.mch_qualifications.join('、') }}</text>
                </view>
            </view>

            <view class="flex">
                <template v-if="form.examine == 0">
                    <button class="flex-1 btn-dark-light-3 btn-round" disabled>审核中</button>
                </template>
                <template v-else-if="form.examine === null || form.examine == 3">
                    <button class="flex-1 btn-primary btn-round" @click="submit()">保存</button>
                </template>
                <template v-else-if="form.examine === 1">
                    <button class="flex-1 btn-success btn-round" @click="copyShopUrl">复制商户中心网址</button>
                </template>
            </view>
        </view>

        <!-- 选择意向城市 -->
        <x-regions ref="xRegionsRef" @selected="selectedRegions" />
        <x-loading v-if="loading" />
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, onBeforeUnmount } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { $api, $func, $message, $page,$helper,$http } from "@/utils";
import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
const UserInfoStore = useUserStore();
const { USERINFO } = useRefs(UserInfoStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const xRegionsRef = ref();
const form = ref({
    mobile: "",
    name: "",
    province_id: "",
    province: '',
    city_id: "",
    city: '',
    area_id: "",
    area: '',
    street_id: "",
    street: '',
    address: '',
    title: '',
    logo: '',
    thumb: [],
    qualifications: [],
    tel: [],
    examine: null,
});
const tel=ref('');
const addTel=()=>{
    if(!tel.value) return;
    if(form.value.tel.length>=3){
        $message.error('最多添加3个联系电话');
        return;
    }
    form.value.tel.push(tel.value);
    tel.value='';
}
const removeTel=(index:number)=>{
    form.value.tel.splice(index,1);
}

const formDisabled = computed(() => {
    return form.value.examine === 1 || form.value.examine === 0;
})
const loading=ref(false);
const getInfo = () => {
    if (!UserInfoStore.hasLogin()||loading.value) return;
    loading.value = true;
    $api.Mch.info().then((data: any) => {
        form.value = data;
    }).catch(() => { }).finally(() => {
        loading.value = false;
    })
}
const submit = () => {
    if (loading.value) return;
    loading.value = true;
    form.value.tel=form.value.tel.filter((item:string)=>item);
    $api.Mch.apply(form.value).then((res: any) => {
        $message.success(res.msg);
        getInfo();
    }).catch((err: any) => {
        $message.error(err.msg);
    }).finally(() => {
        loading.value = false;
    })
}
const selectedRegions = (regions: any) => {
    if (regions.province_id) {
        form.value.province_id = regions.province_id;
        form.value.province = regions.province;
    } else {
        form.value.province_id = '';
        form.value.province = '';
    }
    if (regions.city_id) {
        form.value.city_id = regions.city_id;
        form.value.city = regions.city;
    } else {
        form.value.city_id = '';
        form.value.city = '';
    }
    if (regions.area_id) {
        form.value.area_id = regions.area_id;
        form.value.area = regions.area;
    } else {
        form.value.area_id = '';
        form.value.area = '';
    }
    if (regions.street_id) {
        form.value.street_id = regions.street_id;
        form.value.street = regions.street;
    } else {
        form.value.street_id = '';
        form.value.street = '';
    }
}
const removeThumb = (item: any, index: number) => {
    return new Promise((resolve, reject) => {
        if (formDisabled.value) return reject();
        uni.showModal({
            title: '删除图片',
            content: '确定删除图片吗？',
            success: (res: any) => {
                if (res.confirm) {
                    if (item.id) {
                        $api.Mch.deleteImage({
                            name: 'thumb',
                            id: item.id
                        }).then(() => {
                            resolve(true);
                        }).catch((err: any) => {
                            $message.error(err.msg);
                            reject();
                        })
                    } else {
                        resolve(true);
                    }
                } else {
                    reject();
                }
            }
        })
    })
}
const removeQualifications = (item: any, index: number) => {
    return new Promise((resolve, reject) => {
        if (formDisabled.value) return reject();
        uni.showModal({
            title: '删除图片',
            content: '确定删除图片吗？',
            success: (res: any) => {
                if (res.confirm) {
                    if (item.id) {
                        $api.Mch.deleteImage({
                            name: 'qualifications',
                            id: item.id
                        }).then(() => {
                            resolve(true);
                        }).catch((err: any) => {
                            $message.error(err.msg);
                            reject();
                        })
                    } else {
                        resolve(true);
                    }
                } else {
                    reject();
                }
            }
        })
    })
}
const copyShopUrl = () => {
    uni.setClipboardData({
        data: $http.baseHOST+'shop/#/?appid='+$helper.appid(),
        success: () => {
            $message.success('复制成功');
        }
    })
}
onLoad((options: any) => {
})
onShow(() => {
    if (UserInfoStore.hasLogin()) {
        getInfo();
    }
})
</script>